<template>
	<view class="home">
		<view class="box">
			<view class="box_list">
				<view class="flex_lr list list">
					<view class="f1">头像</view>
					<view class="flex_row">
						<button class="btn-ipt" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
							<image :src="data.avatar" mode="" class="box_list_img"></image>
						</button>
						<text class="tyIcon-arrow-right text-24 text-77"></text>
					</view>
				</view>
				<view class="flex_lr list">
					<view class="f1">昵称</view>
					<view class="flex_row">
						<input type="nickname" placeholder="请输入" class="text-30 flex-one text-right margin-lr-15"
							v-model="data.nickname" @change="geName" />
						<text class="tyIcon-arrow-right text-24 text-77"></text>
					</view>
				</view>
				<view class="flex_lr list">
					<view class="f1">手机号</view>
					<input placeholder="请输入" class="text-30 flex-one text-right margin-lr-15" v-model="data.mobile" />
				</view>
				<view class="flex_lr list">
					<view class="f1">性别</view>
					<view class="flex_row">
						<view :class="data.gender==1?'sex_box':'sex_box_b'" style="margin-right: 30rpx;"
							@click="data.gender=1">男</view>
						<view :class="data.gender==0?'sex_box':'sex_box_b'" @click="data.gender=0">女</view>
					</view>
				</view>
				<view class="flex_lr list" style="border: none;">
					<view>
						<view class="f1">微信二维码</view>
						<view>(个人名片/交友名片)</view>
					</view>
					<image :src="data.link_img" mode="" class="up_img" v-if="data.link_img"></image>
					<view @click="uploadImage" class="up_img y_center flex_center" v-else>
						<view class="f3">+</view>
						<view>上传二维码</view>
					</view>

				</view>
			</view>
		</view>
		<view class="y_center">
			<view class="box_but flex_center" @click="getSave">确认修改</view>
		</view>
	</view>
</template>

<script>
	import config from '../../components/hzjc/config'
	export default {
		data() {
			return {
				data: {},
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				this.rq.getData('Wechat/user_info', {}).then(res => {
					if (res.code == 1) {
						this.data = res.data
					}
				})
			},
			uploadImage() {
				var that = this
				uni.chooseImage({
					count: 1, // 默认9, 设置图片的选择数量
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						// 返回选定照片的本地文件路径列表 tempFilePaths
						uni.showLoading()
						uni.uploadFile({
							url: config.host + 'api/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								var filedata = JSON.parse(uploadFileRes.data)
								that.data.link_img = filedata.data.fullurl
								uni.hideLoading()
							}
						});

					},
					fail: (err) => {
						// 处理错误情况
						console.error(err);
					}
				});

			},
			//上传头像
			chooseAvatar(e) {
				var that = this
				// 上传
				uni.showLoading({
					mask: true,
					title: '正在上传'
				})

				let tempFile = e.detail.avatarUrl
				console.log(tempFile, 'tempFile')
				uni.uploadFile({
					url: config.host + 'api/common/upload',
					filePath: tempFile,
					name: 'file',
					success: (uploadFileRes) => {
						var filedata = JSON.parse(uploadFileRes.data)
						that.data.avatar = filedata.data.fullurl
						console.log(that.avatar, '头像');
						uni.hideLoading()

					}
				});

			},
			//授权昵称
			geName(e) {
				var that = this
				that.nickname = e.detail.value
				console.log(that.nickname)
				if (that.type == 'CUSTOMER') {
					that.rq.getData('user/save', {
						nickname: e.detail.value
					})
				}
				if (that.type == 'RIDER') {
					that.rq.getData('rider_enter/update_info', {
						real_name: e.detail.value
					})
				}

			},
			getSave(){
				this.rq.getData('Wechat/save',this.data).then(res=>{
					if(res.code==1){
						this.cn.alert('修改成功').then(res=>{
							uni.navigateBack({
								delta:1
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		margin: 40rpx;
	}

	.box_list {
		background: #FFF;
		box-shadow: 5px 5px 10px 0 rgba(186, 186, 186, 0.7);
		border-radius: 30px;
		padding: 40rpx;

		.list {
			min-height: 100rpx;
			padding-bottom: 10rpx 0;
			margin-bottom: 10rpx;
			border-bottom: 2rpx solid #d1d1d1;
		}

		.box_list_img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.f1 {
			font-size: 30rpx;
			font-weight: bold;
		}

		.f2 {
			font-size: 26rpx;
		}

		.f3 {
			font-size: 75rpx;
		}

		.up_img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 10px;
			background-color: #f3f5f7;
		}
	}

	.sex_box {
		border-radius: 10rpx;
		background: #000;
		color: #FFF;
		padding: 10rpx 40rpx;
	}

	.sex_box_b {
		border-radius: 10rpx;
		color: #000000;
		border: 2rpx solid #000;
		padding: 10rpx 40rpx;
	}

	.box_but {
		position: fixed;
		bottom: 100rpx;
		width: 80%;
		font-size: 34rpx;
		color: #FFF;
		padding: 30rpx 0;
		background: #000;
		border-radius: 50rpx;
	}
</style>